<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" size="small" v-show="showSearch" label-width="68px">
      <el-form-item label="关键词" prop="keywords">
        <el-input
          v-model="queryParams.keywords"
          placeholder="请输入医生名称/手机号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否实名且审核" prop="isVerified" label-width="118px">
        <el-select placeholder="请选择是否实名且审核" v-model="queryParams.isVerified" size="small">
          <el-option label="未实名" value="0"></el-option>
          <el-option label="已实名且未审核" value="1"></el-option>
          <el-option label="已实名且审核成功" value="2"></el-option>
          <el-option label="已实名且审核失败" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职业认证" prop="isVerified">
        <el-select placeholder="请选择是否职业认证" v-model="queryParams.professionStatus" size="small">
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="dateValue">
        <el-date-picker
          v-model="queryParams.dateValue"
          type="daterange"
          align="right"
          size="small"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="queryParams.status" @change="handleQuery">
          <el-radio-button :label="undefined">全部</el-radio-button>
          <el-radio-button label="0">启用</el-radio-button>
          <el-radio-button label="1">禁用</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" ref="filterTable" :data="memberList" @selection-change="handleSelectionChange"
              @sort-change="handleSortChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="名称" align="center" prop="nickName">
        <template slot-scope="scope">
          <span style="cursor: pointer;color: #1c84c6;" @click="goDetail(scope.row)"
                v-hasPermi="['biz:doctorUser:query']"
          >{{ scope.row.nickName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center" prop="phonenumber"/>
      <el-table-column label="创建时间" align="center" prop="createTime"/>
      <el-table-column label="陪护豆数量(个)" align="center" prop="escortBeanCount" sortable="custom"
                       :sort-orders="['ascending','descending']"
      />
      <el-table-column label="保证金(元)" align="center" prop="amount"/>
      <el-table-column label="保证金提交时间" align="center" prop="payTime"/>

      <el-table-column label="实名认证" align="center" prop="isVerified">
        <template slot-scope="scope">
          <span v-if="scope.row.isVerified === '0'" style="color: red">否</span>
          <span v-if="scope.row.isVerified === '1'" style="color: green">是</span>
        </template>
      </el-table-column>
      <el-table-column label="医院" align="center" prop="hospitalName"/>
      <el-table-column label="科室" align="center" prop="departmentName"/>
      <el-table-column label="身份证图片" align="center" prop="idCardFront">
        <template slot-scope="scope">
          <span style="cursor: pointer;color: #1c84c6;" @click="view(scope.row)">点击查看</span>
        </template>
      </el-table-column>
      <el-table-column label="职业资格证书" align="center" prop="idCardFront">
        <template slot-scope="scope">
          <span style="cursor: pointer;color: #1c84c6;" @click="viewProfession(scope.row)">点击查看</span>
        </template>
      </el-table-column>
      <el-table-column label="工作年限" align="center" prop="workYears">
        <template slot-scope="scope">
          <span>{{ scope.row.workYears }}<span v-if="scope.row.workYears">年</span></span>
        </template>
      </el-table-column>
      <el-table-column label="等级" align="center" prop="level">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.biz_doctor_title" :value="scope.row.level"/>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" prop="sex">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
        </template>
      </el-table-column>
      <el-table-column label="看诊记录" align="center" prop="sex">
        <template slot-scope="scope">
          <span style="cursor: pointer;color: #1c84c6;">{{ scope.row.recordNum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份审核" align="center" prop="auditStatus">
        <template slot-scope="scope">
          <span v-if="scope.row.auditStatus === '0'" style="color: #1c84c6">未审核</span>
          <span v-if="scope.row.auditStatus === '1'" style="color: green">审核成功</span>
          <span v-if="scope.row.auditStatus === '2'" style="color: red">审核失败</span>
        </template>
      </el-table-column>
      <el-table-column label="审核备注" align="center" prop="auditRemark"/>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <span v-if="scope.row.status === '0'" style="color: green">正常</span>
          <span v-if="scope.row.status === '1'" style="color: red">禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center"  class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status==='1'"
            size="mini"
            type="text"
            icon="el-icon-check"
            style="color: #4AB7BD"
            @click="handleChangeStatus(scope.row)"
            v-hasPermi="['biz:doctorUser:changeStatus']"
          >启用
          </el-button>
          <el-button
            v-if="scope.row.status==='0'"
            size="mini"
            type="text"
            icon="el-icon-close"
            style="color: #E65D6E"
            @click="handleChangeStatus(scope.row)"
            v-hasPermi="['biz:doctorUser:changeStatus']"
          >禁用
          </el-button>
          <el-button
            v-if="scope.row.auditStatus==='0' && scope.row.idCardBack !== '' && !scope.row.idCardFront !== ''"
            size="mini"
            type="text"
            icon="el-icon-s-check"
            @click="handleAudit(scope.row)"
            v-hasPermi="['biz:doctorUser:audit']"
          >身份审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-drawer
      title="医生详情"
      :visible.sync="drawer"
      size="50%"
      :show-close="true"
      append-to-body
    >
      <div style="margin: 20px 20px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基础信息" name="baseInfo">
            <el-form ref="form" :model="form" label-width="130px" size="mini">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="医生名称：">{{ form.nickName }}</el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="手机号：">{{ form.phonenumber }}</el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="实名认证：">
                    <span v-if="form.isVerified === '0'" style="color: red">否</span>
                    <span v-if="form.isVerified === '1'" style="color: green">是</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="工作年限：">{{ form.workYears }}
                      <span v-if="form.workYears">年</span>
                    <el-button size="mini" round type="primary" style="margin-left: 40px" v-hasPermi="['biz:doctorUser:updateWorkYears']" @click="updateWorkYears">修改工作年限</el-button>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="医生等级：">
                    <dict-tag :options="dict.type.biz_doctor_title" :value="form.level"/>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="所属医院：">{{ form.hospitalName }}</el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="所属科室：">{{ form.departmentName }}</el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="陪护豆：">{{ form.escortBeanCount }}</el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="保证金：">{{ form.amount }}</el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="保证金提交时间：">{{ form.payTime }}</el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="状态：">
                    <span v-if="form.status === '0'" style="color: green">正常</span>
                    <span v-if="form.status === '1'" style="color: red">禁用</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="身份证照片：">
                    <el-image :src="form.idCardFront" style="width: 300px;height: 150px" v-if="form.idCardFront"
                              :preview-src-list="new Array(form.idCardFront)"
                    ></el-image>
                    <el-image :src="form.idCardBack" style="width: 300px;height: 150px;margin-left: 20px"
                              v-if="form.idCardBack"
                              :preview-src-list="new Array(form.idCardBack)"
                    ></el-image>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="职业资格证：">
                    <el-image v-for="(img,index) in form.professionImageArr" :key="index"
                              :src="img" style="width: 300px;height: 150px;" v-if="form.professionImages"
                              :preview-src-list="form.professionImageArr"
                    ></el-image>

                  </el-form-item>
                </el-col>

              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="转赠明细" name="giveAway">
            <el-table v-loading="giveAwayLoading" :data="userGiveAwayRecordList">
              <el-table-column label="序号" align="center" type="index"/>
              <el-table-column label="流水号" align="center" prop="serialNumber"/>
              <el-table-column label="会员名称" align="center" prop="sponsorUserName"/>
              <el-table-column label="手机号" align="center" prop="sponsorUserPhone"/>
              <el-table-column label="转赠金额" align="center" prop="giveAwayAmount"/>
              <el-table-column label="收赠人" align="center" prop="receiveUserName"/>
              <el-table-column label="收赠人手机号" align="center" prop="receiveUserPhone"/>
              <el-table-column label="转赠金额" align="center" prop="giveAwayAmount"/>
              <el-table-column label="转赠时间" align="center" prop="giveAwayTime"/>
            </el-table>
            <pagination
              v-show="giveAwayTotal>0"
              :total="giveAwayTotal"
              :page.sync="giveAwayQueryParams.pageNum"
              :limit.sync="giveAwayQueryParams.pageSize"
              @pagination="getUserGiveAwayList"
            />
          </el-tab-pane>
          <el-tab-pane label="充值明细" name="recharge">
            <el-table v-loading="rechargeLoading" :data="userRechargeRecordList">
              <el-table-column label="序号" align="center" type="index"/>
              <el-table-column label="流水号" align="center" prop="serialNumber"/>
              <el-table-column label="会员名称" align="center" prop="nickName"/>
              <el-table-column label="手机号" align="center" prop="phonenumber"/>
              <el-table-column label="充值数量(陪护豆/个)" align="center" prop="rechargeAmount"/>
              <el-table-column label="所需金额(人民币/元)" align="center" prop="paymentAmount"/>
              <el-table-column label="充值时间" align="center" prop="createTime"/>
            </el-table>
            <pagination
              v-show="rechargeTotal>0"
              :total="rechargeTotal"
              :page.sync="rechargeQueryParams.pageNum"
              :limit.sync="rechargeQueryParams.pageSize"
              @pagination="getUserRechargeList"
            />
          </el-tab-pane>
          <el-tab-pane label="提现明细" name="withdraw">
            <el-table v-loading="withdrawLoading" :data="userWithdrawRecordList">
              <el-table-column label="序号" align="center" type="index"/>
              <el-table-column label="流水号" align="center" prop="serialNumber"/>
              <el-table-column label="会员名称" align="center" prop="nickName"/>
              <el-table-column label="手机号" align="center" prop="phonenumber"/>
              <el-table-column label="提现金额" align="center" prop="withdrawAmount"/>
              <el-table-column label="提现时间" align="center" prop="withdrawTime"/>
              <el-table-column label="审核状态" align="center" prop="auditStatus">
                <template slot-scope="scope">
                  <span v-if="scope.row.auditStatus === '0'" style="color: #1c84c6">未审核</span>
                  <span v-if="scope.row.auditStatus === '1'" style="color: green">审核成功</span>
                  <span v-if="scope.row.auditStatus === '2'" style="color: red">审核失败</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="withdrawTotal>0"
              :total="withdrawTotal"
              :page.sync="withdrawQueryParams.pageNum"
              :limit.sync="withdrawQueryParams.pageSize"
              @pagination="getUserWithdrawList"
            />
          </el-tab-pane>
        </el-tabs>
      </div>


    </el-drawer>
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-form-item label="身份证正面" prop="idCardFront">
          <el-image :src="form.idCardFront" style="width: 300px;height: 150px;margin-left: 20px" v-if="form.idCardFront" :preview-src-list="new Array(form.idCardFront)"></el-image>
        </el-form-item>
        <el-form-item label="身份证反面" prop="idCardBack">
          <el-image :src="form.idCardBack" style="width: 300px;height: 150px;margin-left: 20px" v-if="form.idCardBack" :preview-src-list="new Array(form.idCardBack)" />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input type="text" disabled v-model="form.realName" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="idCardNumber">
          <el-input type="text" disabled v-model="form.idCardNumber" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="有效期限" prop="idCardValidDate">
          <el-input type="text" disabled v-model="form.idCardValidDate" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" prop="auditStatus">
          <el-radio v-model="form.auditStatus" label="1">审核通过</el-radio>
          <el-radio v-model="form.auditStatus" label="2">审核不通过</el-radio>
        </el-form-item>
        <el-form-item label="审核备注" prop="auditRemark" :rules="form.auditStatus === '2' ? rules.auditRemark : [{required: false}]">
          <el-input v-model="form.auditRemark" type="textarea" maxlength="255" placeholder="请输入审核备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-drawer
      title="职业资格证书"
      :visible.sync="professionDrawer"
      size="50%"
      :show-close="true"
      append-to-body
    >
      <el-table v-loading="professionLoading" :data="professionRecordList">
        <el-table-column label="序号" align="center" type="index"/>
        <el-table-column label="用户姓名" align="center" prop="nickName"/>
        <el-table-column label="职业资格认证图片" align="center" prop="professionImage">
          <template slot-scope="scope">
            <el-image :src="scope.row.professionImage" style="width: 140px;height: 70px"
                      :preview-src-list="new Array(scope.row.professionImage)"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="职业名称" align="center" prop="professionName"/>
        <el-table-column label="有效期" align="center" prop="validStartDate" width="180">
          <template slot-scope="scope">
            <span>{{
                parseTime(scope.row.validStartDate, '{y}-{m}-{d}')
              }}-{{ parseTime(scope.row.validEndDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="认证状态" align="center" prop="status">
          <template slot-scope="scope">
            <span v-if="scope.row.status === '0'">未认证</span>
            <span v-if="scope.row.status === '1'">已认证</span>
            <span v-if="scope.row.status === '2'">已过期</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" align="center" prop="auditStatus">
          <template slot-scope="scope">
            <span v-if="scope.row.auditStatus === '0'" style="color: #00a0e9;cursor: pointer">未审核</span>
            <span v-if="scope.row.auditStatus === '1'" style="color: green;cursor: pointer">审核通过</span>
            <span v-if="scope.row.auditStatus === '2'" style="color: red;cursor: pointer">审核失败</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="professionTotal>0"
        :total="professionTotal"
        :page.sync="professionQueryParams.pageNum"
        :limit.sync="professionQueryParams.pageSize"
        @pagination="getUserProfessionList"
      />
    </el-drawer>


    <el-image-viewer v-if="showViewer" :on-close="showViewerClose" :url-list="[guidePic,guidePic2]"></el-image-viewer>
    <el-dialog title="修改工作年限" :visible.sync="workYearsOpen" width="600px" append-to-body>
      <el-form ref="workYearsForm" :model="workYearsForm" :rules="rules" label-width="80px">
        <el-form-item label="工作年限" prop="workYears">
          <el-input-number v-model="workYearsForm.workYears"  :min="1" :max="99"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="workYearsLoading" @click="workYearsSubmitForm">确 定</el-button>
        <el-button @click="workYearsCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listDoctorUser, getDoctorUser, changeStatus, audit } from '@/api/biz/doctorUser'
import {updateWorkYears } from '@/api/biz/escort'
import { getUserWithdrawList, getUserGiveAwayList, getUserRechargeList } from '@/api/biz/withdrawRecord'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { listProfessionRecord } from '@/api/biz/professionRecord'

export default {
  name: 'DoctorUser',
  dicts: ['sys_user_type', 'sys_user_sex', 'biz_doctor_title'],
  components: {
    ElImageViewer
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      professionLoading: true,
      withdrawLoading: true,
      giveAwayLoading: true,
      rechargeLoading: true,
      workYearsLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      professionTotal: 0,
      withdrawTotal: 0,
      giveAwayTotal: 0,
      rechargeTotal: 0,
      // 会员表格数据
      memberList: [],
      professionRecordList: [],
      userWithdrawRecordList: [],
      userGiveAwayRecordList: [],
      userRechargeRecordList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      workYearsOpen:false,
      drawer: false,
      professionDrawer: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: undefined,
        keywords: undefined,
        dateValue: undefined,
        startTime: undefined,
        endTime: undefined,
        isVerified: undefined,
        sortedBy: undefined,
        orderBy: undefined,
        professionStatus: undefined
      },
      // 查询参数
      professionQueryParams: {
        pageNum: 1,
        pageSize: 10,
        auditStatus: '1',
        userId: undefined
      },
      withdrawQueryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: undefined
      },
      giveAwayQueryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: undefined
      },
      rechargeQueryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: undefined
      },
      rules: {
        auditStatus: [
          { required: true, message: '审核状态不能为空', trigger: 'blur' }
        ],
        auditRemark: [
          { required: true, message: '审核备注不能为空', trigger: 'blur' }
        ]
      },
      // 表单参数
      form: {},
      workYearsForm:{},
      submitLoading: false,
      showViewer: false,
      activeName: 'baseInfo',
      guidePic: '', // 预览图片的地址
      guidePic2: '', // 预览图片的地址
      pickerOptions: {
        shortcuts: [{
          text: '最近一天',
          onClick(picker) {
            const end = new Date()
            picker.$emit('pick', [end, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.getList()
  },
  activated() {
    this.getList()
  },
  methods: {
    /** 查询会员列表 */
    getList() {
      this.loading = true
      listDoctorUser(this.queryParams).then(response => {
        this.memberList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 查询用户职业资质认证列表 */
    getUserProfessionList() {
      this.professionLoading = true
      listProfessionRecord(this.professionQueryParams).then(response => {
        this.professionRecordList = response.rows
        this.professionTotal = response.total
        this.professionLoading = false
      })
    },
    /**会员提现记录列表*/
    getUserWithdrawList() {
      this.withdrawLoading = true
      getUserWithdrawList(this.withdrawQueryParams).then(res => {
        this.userWithdrawRecordList = res.rows
        this.withdrawTotal = res.total
        this.withdrawLoading = false
      })
    },
    /**会员转赠记录列表*/
    getUserGiveAwayList() {
      this.giveAwayLoading = true
      getUserGiveAwayList(this.giveAwayQueryParams).then(res => {
        this.userGiveAwayRecordList = res.rows
        this.giveAwayTotal = res.total
        this.giveAwayLoading = false
      })
    },
    /**会员充值记录列表*/
    getUserRechargeList() {
      this.rechargeLoading = true
      getUserRechargeList(this.rechargeQueryParams).then(res => {
        this.userRechargeRecordList = res.rows
        this.rechargeTotal = res.total
        this.rechargeLoading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    getIndex($index) {
      //表格序号
      return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
    },
    // 表单重置
    reset() {
      this.form = {
        userId: null,
        auditStatus: null,
        auditRemark: null
      }
      this.resetForm('form')
    },
    // 表单重置
    workYearsReset() {
      this.workYearsForm = {
        userId: null,
        workYears:undefined,
      }
      this.resetForm('workYearsForm')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.cityCode = undefined
      this.queryParams.districtCode = undefined
      this.queryParams.professionStatus = undefined
      this.queryParams.sortedBy = undefined
      this.queryParams.orderBy = undefined
      if (this.$refs.filterTable) {
        this.$refs.filterTable.clearSort() // 清除排序
      }
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    handleChangeStatus(row) {
      let statusText = row.status === '0' ? '禁用' : '启用'
      let status = row.status === '0' ? '1' : '0'
      const ids = row.userId
      this.$confirm('是否确认' + statusText + '该项数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return changeStatus({ userId: ids, status: status })
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('操作成功')
      }).catch(function() {
      })
    },
    handleAudit(row) {
      this.reset();
      this.form.userId = row.userId
      this.form.realName = row.realName
      this.form.idCardBack = row.idCardBack
      this.form.idCardFront = row.idCardFront
      this.form.idCardNumber = row.idCardNumber
      this.form.idCardValidDate = row.idCardValidDate
      this.title = '身份审核'
      this.open = true
    },
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.auditStatus === '2') {
            if (!this.form.auditRemark) {
              this.$modal.msgError('请填写审核不通过的备注')
              return
            }
          }
          this.submitLoading = true
          audit(this.form).then(response => {
            this.$modal.msgSuccess('审核成功')
            this.open = false
            this.submitLoading = false
            this.getList()
          }).catch(() => {
            this.submitLoading = false
          })
        }
      })
    },
    view(row) {
      console.log('row', row)
      if (row.idCardBack === '' && row.idCardFront === '') {
        this.$modal.msgError('暂无身份证图片')
        return
      }
      this.guidePic = row.idCardFront
      this.guidePic2 = row.idCardBack
      this.guidePic && this.guidePic2 ? this.showViewer = true : this.$message.info('当前没有可预览的图片')
    },
    viewProfession(row) {
      this.professionQueryParams.userId = row.userId
      this.getUserProfessionList()
      this.professionDrawer = true
    },
    showViewerClose() {
      this.showViewer = false
    },
    goDetail(row) {
      this.activeName = 'baseInfo'
      getDoctorUser(row.userId).then(res => {
        this.form = res.data
        if (this.form.professionImages !== null) {
          this.form.professionImageArr = this.form.professionImages.split(',')
        }
        this.drawer = true
        console.log('this.form', this.form)
      })
    },
    handleClick() {
      if (this.activeName === 'baseInfo') {

      } else if (this.activeName === 'giveAway') {
        this.giveAwayQueryParams.userId = this.form.userId
        this.getUserGiveAwayList()
      } else if (this.activeName === 'recharge') {
        this.rechargeQueryParams.userId = this.form.userId
        this.getUserRechargeList()
      } else if (this.activeName === 'withdraw') {
        this.withdrawQueryParams.userId = this.form.userId
        this.getUserWithdrawList()
      }
    },
    handleSortChange(column) {
      if (column.order === 'ascending') {
        this.queryParams.sortedBy = 'asc'
      } else if (column.order === 'descending') {
        this.queryParams.sortedBy = 'desc'
      }
      if (column.prop === 'escortBeanCount') {
        this.queryParams.orderBy = 'escort_bean_count'
      }
      console.log('this.queryParams', this.queryParams)
      this.getList()
    },
    //修改工作年限
    updateWorkYears(){
      this.workYearsReset()
      this.workYearsOpen = true;
      this.workYearsForm.userId = this.form.userId;
      if(this.form.workYears === null){
        this.workYearsForm.workYears = undefined;
      }else {
        this.workYearsForm.workYears = this.form.workYears;
      }

    },
    workYearsCancel(){
      this.workYearsOpen = false
      this.workYearsReset()
    },
    workYearsSubmitForm() {
      this.$refs['workYearsForm'].validate(valid => {
        if (valid) {
          this.workYearsLoading = true
          console.log("this.workYearsForm",this.workYearsForm);
          updateWorkYears(this.workYearsForm).then(response => {
            this.form.workYears = this.workYearsForm.workYears
            this.$modal.msgSuccess('修改成功')
            this.workYearsOpen = false
            this.workYearsLoading = false
            this.getList()
          }).catch(() => {
            this.workYearsLoading = false
          })
        }
      })
    },

  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.dd {
  width: 200px;
  float: left;
}

.level {
  margin-left: 17px;
  width: 80px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  margin-top: 20px
}

.imageDiv {
  width: 150px;
  height: 100px;
  float: left;
  margin-left: 17px;
}
</style>
